import './styles.less';
import { useEffect, useState } from 'react';
import Play from './play';

const App = () => {
  const [show, setShow] = useState(false);
  const [score, setScore] = useState(0);
  const options = {
    cellColors: [
      '#EEE4DA',
      '#ede0c8',
      '#f2b179',
      '#f59563',
      '#f67c5f',
      '#f65e3b',
    ],
    themeColor: 'rgba(238, 228, 218, 0.35)',
    setShow,
    setScore,
  };
  let playG = null;
  useEffect(() => {
    playG = new Play(options);
  }, []);
  return (
    <div className="game">
      <div className="score">
        得分:<span id="score">{score}</span>
      </div>
      <div className="btn" onClick={() => playG && playG.newGame()}>
        new Game
      </div>
      <div className="container">
        <div className="grid-row">
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
        </div>
        <div className="grid-row">
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
        </div>
        <div className="grid-row">
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
        </div>
        <div className="grid-row">
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
          <div className="grid-cell"></div>
        </div>
      </div>
      {show && (
        <div className="gameover">
          <p>Game over!</p>
          <p>
            <a id="again" onClick={() => playG && playG.tryAgain()}>
              Try again
            </a>
          </p>
        </div>
      )}
    </div>
  );
};

export default App;
